<script setup>
import { useRouter } from 'vue-router'
import { videoList, delVideo } from "@/api/video"
import { getCurrentInstance, ref } from "vue"
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance()
const router = useRouter()
const data = ref([])
const total = ref(0)
const params = ref({
	page: 1,
	pageSize: 10,
	keywords: ""
})
const getVideoList = async () => {
	try {
		const res = await videoList(params.value)
		data.value = res.records
		total.value = res.total
	} catch (e) {
	}
}
getVideoList()

const handleSizeChange = (size) => {
	params.value.pageSize = size
	getVideoList()
}

const handleCurrentChange = (page) => {
	params.value.page = page
	getVideoList()
}

// 删除视频
const delAppUser = (row) => {
	proxy.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(async () => {
		await delVideo(row.id)
		ElMessage.success("删除完成")
		await getVideoList()
	})
}
</script>

<template>
	<el-card>
		<el-button type="primary" class="mb-[10px]" @click="router.push('/uploadVideo')">发布视频</el-button>
		<!--表格-->
		<el-table :data="data" border stripe>
			<el-table-column label="ID" prop="id"></el-table-column>
			<el-table-column label="用户ID" prop="userId"></el-table-column>
			<el-table-column label="视频封面">
				<template #default="{ row }">
					<el-image :src="row.coverUrl" class="w-[100px] h-[100px]" fit="cover"></el-image>
				</template>
			</el-table-column>
			<el-table-column label="视频链接" prop="videoUrl"></el-table-column>
			<el-table-column label="视频类型" prop="type"></el-table-column>
			<el-table-column label="视频标题" prop="title"></el-table-column>
			<el-table-column label="视频描述" prop="description"></el-table-column>
			<el-table-column label="操作" width="300">
				<template #default="{ row }">
					<el-button size="small" type="primary" @click="router.push(`/uploadVideoDetail?id=${row.id}`)">编辑</el-button>
					<el-button size="small" type="danger" @click="delAppUser(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<div class="mt-[10px] flex justify-end">
			<el-pagination v-model:current-page="params.page" v-model:page-size="params.pageSize"
				:page-sizes="[10, 20, 30, 40]" background layout="sizes, prev, pager, next" :total="total"
				@size-change="handleSizeChange" @current-change="handleCurrentChange" />
		</div>
	</el-card>
</template>

<style scoped lang="scss"></style>
